import {
  NConfigProvider,
  darkTheme,
  zhCN,
  dateZhCN,
  GlobalThemeOverrides,
} from "naive-ui";
import { Transition } from "vue";
import { RouterView } from "vue-router";
import GlobalProvider from "./components/GlobalProvider/Index";
import { useTheme } from "./hooks/useTheme";

export default defineComponent({
  name: "App",
  setup() {
    const { globalTheme } = useTheme();
    const theme = computed(() => {
      if (globalTheme.value === "darkTheme") {
        return darkTheme;
      } else {
        return null;
      }
    });
    const themeOverrides: GlobalThemeOverrides = {
      //修改主题
      // common: {
      //   primaryColor: "#080467",
      //   primaryColorHover: "#211FAD",
      // },
      // Message: {
      //   iconColorSuccess: "#080467",
      // },
      // Button: {
      //   textColor: "#FF0000",
      // },
    };
    onMounted(() => {
      document.querySelector("#Loading")!.classList.add("loading-hide");
    });
    return () => (
      <NConfigProvider
        locale={zhCN}
        dateLocale={dateZhCN}
        themeOverrides={themeOverrides}
        theme={theme.value}
      >
        <GlobalProvider>
          <RouterView>
            {{
              default: ({ Component }: any) => {
                return (
                  <Transition name="scale" mode="out-in" appear>
                    <Component />
                  </Transition>
                );
              },
            }}
          </RouterView>
        </GlobalProvider>
      </NConfigProvider>
    );
  },
});
